<template>
  <el-menu default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
    <h1 style="float: left;line-height: 60px;font-size: 20px;padding: 0 20px">山东财经大学区块链打卡辅助平台</h1>
  </el-menu>
  <el-container>
    <el-main>
      <el-row style="width: 90%;margin: 30px auto 0;display: flex;justify-content: center;align-items: center">
        <el-col :span="11">
          <el-card style="">
            <template #header>
              官网个人信息
            </template>
            <el-form label-width="5rem" label-position="right">
              <el-form-item label="姓名">
                <el-input disabled :size="input_size" v-model="form.name"></el-input>
              </el-form-item>
              <el-form-item label="学号">
                <el-input disabled :size="input_size" v-model="form.study_id"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group style="width: 100%" disabled v-model="form.sex" size="small">
                  <el-radio-button :label="1">男</el-radio-button>
                  <el-radio-button :label="0">女</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="家庭住址">
                <el-input :disabled="edit" :size="input_size" v-model="form.address"></el-input>
              </el-form-item>
              <el-form-item label="现居地址">
                <el-input :disabled="edit" :size="input_size" v-model="form.now_address"></el-input>
              </el-form-item>
              <el-form-item label="本人电话">
                <el-input :disabled="edit" :size="input_size" v-model="form.contact"></el-input>
              </el-form-item>
              <el-form-item label="家长电话">
                <el-input :disabled="edit" :size="input_size" v-model="form.phone"></el-input>
              </el-form-item>
              <el-form-item label="学院">
                <el-select disabled :size="input_size" v-model="form.college_id" style="width: 100%">
                  <el-option v-for="option in $college" :label="option[1]" :value="option[0]"></el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="省份">
                    <el-select default-first-option @change="get_city" :size="input_size" v-model="form.province_id"
                               style="width: 100%">
                      <el-option v-for="option in $province" :label="option[1]" :value="option[0]"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="城市" required>
                    <el-select :size="input_size" v-model="form.city_id" style="width: 100%" :loading="city_loading">
                      <el-option v-for="option in city_list[0]" :label="option[1]" :value="option[0]"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="2">
          <el-button size="mini" style="font-size: 24px;" icon="el-icon-caret-right" type="primary" plain
                     @click="change_value"></el-button>
        </el-col>
        <el-col :span="11">
          <el-card style="">
            <template #header>
              系统个人信息
            </template>
            <el-form label-width="5rem" label-position="right">
              <el-form-item label="姓名">
                <el-input disabled :size="input_size" v-model="edit_form.name"></el-input>
              </el-form-item>
              <el-form-item label="学号">
                <el-input disabled :size="input_size" v-model="edit_form.study_id"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group style="width: 100%" disabled v-model="edit_form.sex" size="small">
                  <el-radio-button :label="1">男</el-radio-button>
                  <el-radio-button :label="0">女</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="家庭住址">
                <el-input disabled :size="input_size" v-model="edit_form.address"></el-input>
              </el-form-item>
              <el-form-item label="现居地址">
                <el-input disabled :size="input_size" v-model="edit_form.now_address"></el-input>
              </el-form-item>
              <el-form-item label="本人电话">
                <el-input disabled :size="input_size" v-model="edit_form.contact"></el-input>
              </el-form-item>
              <el-form-item label="家长电话">
                <el-input disabled :size="input_size" v-model="edit_form.phone"></el-input>
              </el-form-item>
              <el-form-item label="学院">
                <el-select disabled :size="input_size" v-model="edit_form.college_id" style="width: 100%">
                  <el-option v-for="option in $college" :label="option[1]" :value="option[0]"></el-option>
                </el-select>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="省份">
                    <el-select disabled @change="get_city(edit_form.province_id,1)" :size="input_size"
                               v-model="edit_form.province_id"
                               style="width: 100%">
                      <el-option v-for="option in $province" :label="option[1]" :value="option[0]"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="城市" required>
                    <el-select disabled :size="input_size" v-model="edit_form.city_id" style="width: 100%"
                               :loading="city_loading">
                      <el-option v-for="option in city_list[1]" :label="option[1]" :value="option[0]"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="12" style="margin-top: 30px;">
          <el-popover
              placement="right"
              :width="400"
              trigger="click"
          >
            <template #reference>
              <el-button style="width: 40%" icon="el-icon-finished" type="success" plain @click="save_data">保存
              </el-button>
            </template>
            <el-row align="center">
              <el-col :span="20">
                <el-input :size="input_size" v-model="edit_form.email">
                  <template #prepend>邮箱</template>
                </el-input>
              </el-col>
              <el-col :span="4" style="text-align: center">
                <el-link type="primary" href="#" @click="save_data">提交</el-link>
              </el-col>
            </el-row>
          </el-popover>
        </el-col>
      </el-row>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>


<script>
export default {
  name: "info",
  data() {
    return {
      input_size: 'mini',
      city_list: [[], []],
      edit: true,
      city_loading: true,
      form: {
        sex: 0,
        city_id: ''
      },
      edit_form: {},
      dialogVisible: true
    }
  },
  methods: {
    get_city(province_id, choice = 0) {
      let str = ''
      console.log(choice)
      if (choice === 0) {
        this.form.city_id = '0'
      } else {
        this.edit_form.city_id = '0'
      }
      this.city_loading = true
      this.$axios({
        url: '/api/get_city',
        params: {
          province_id: province_id
        },
      }).then((res) => {
        str = res.data
        const reg = /<option.*?option>/g
        const value_reg = /[0-9]{1,3}/
        const label_reg = />.*?</
        const options = str.match(reg)
        const list = []
        for (const option of options) {
          let value = option.match(value_reg)[0]
          let label = option.match(label_reg)[0]
          label = label.slice(1, label.length - 1)
          list.push([value, label])
        }
        this.city_list[choice] = list
        this.city_loading = false
      })
    },
    change_value() {
      this.edit_form = JSON.parse(JSON.stringify(this.form))
      this.city_list[1] = this.city_list[0]
    },
    get_data() {
      this.$axios({
        url: '/api/user/info',
        params: {
          id: JSON.parse(localStorage['user_data'])['study_id']
        },
      }).then((res) => {
        this.edit_form = JSON.parse(JSON.stringify(res.data))
        this.edit_form['province_id'] = this.edit_form['province_id'].toString()
        this.edit_form['college_id'] = this.edit_form['college_id'].toString()
        this.get_city(this.edit_form['province_id'], 1)
        this.edit_form['city_id'] = res.data['city_id'].toString()
      })
    },
    save_data() {
      if (this.$qs.stringify(this.edit_form).length === 0) {
        this.$ElMessage.error({
          type: "error",
          message: "请核验信息并导入本系统中"
        })
      } else {
        if (!this.edit_form.email) {
          this.$ElMessage.error({
            type: "error",
            message: "请填写通知邮箱，用于签到状态提醒"
          })

        } else {
          if (this.edit_form.city_id === '0' || this.edit_form.province_id === '0') {
            this.$ElMessage.error({
              type: "error",
              message: "请完善省份及城市"
            })
          } else {
            this.$axios.post('/api/insert/info', this.edit_form).then((res) => {
              if (res.data) {
                this.$ElMessage.success({
                  message: "提交成功"
                })
                setTimeout(() => {
                  this.$router.push('/admin')
                }, Math.random() * 800)
              }
            }).catch((res) => {
              this.$ElMessage.error({
                message: "提交失败"
              })
            })
          }
        }
      }
    }
  },
  mounted() {
    if (localStorage.user_data) {
      this.form = JSON.parse(localStorage.user_data)
      this.get_city(this.form.province_id)
    } else {
      this.$axios.get('/api/index').then((res) => {
        localStorage.user_data = JSON.stringify(res.data.data)
        this.form = res.data.data
        this.get_city(this.form.province_id)
      })
    }
    this.get_data()
  }
}
</script>

<style scoped>

</style>